<template>
    <div id="app">
        <router-view></router-view>
        <div class="loading-mark" :class="isMarkShow ? 'show' : 'hide'" :style="`display: ${markDisplay};`">
            <div class="loading-box">
                <img src="@/assets/img/loading.gif" alt="">
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, watchEffect, onMounted, onBeforeUnmount } from 'vue';
import { useStore } from 'vuex';
import { useUserStore } from '@/store/user';
import { useRoute, useRouter } from 'vue-router';
import { getFavorite } from './api/favorite';
import { getAllCategories } from '@/api/category';

const route = useRoute();
const router = useRouter();
const store = useStore();
const userStore = useUserStore();

// 定义状态
// 加载蒙版的显隐过度
const markDisplay = ref("none");
const isMarkShow = ref(false);

// 修改状态的方法
const show = () => {
    markDisplay.value = "";
    isMarkShow.value = true;
};

const hide = () => {
    isMarkShow.value = false;
    setTimeout(() => {
        markDisplay.value = "none";
    }, 200);
};

onMounted(async () => {
    // 如果缓存中有token，尝试获取用户数据
    if (localStorage.getItem("Authorization")) {
        console.log("token:" + localStorage.getItem("Authorization"));
        await userStore.getPersonalInfo();
        // console.log("用户信息:" + JSON.stringify(userStore.user));

        // await store.dispatch("getPersonalInfo");
        // await getFavorites();
    }
    // 防止请求报错，上面token过期会清除浏览器本地存的token
    if (localStorage.getItem("Authorization")) {
        userStore.getMsgUnread();
        await initIMServer();
        await getFavorites();
        // await this.getLikeAndDisLikeComment();
    }
    getChannels();
});

// 获取频道列表
const getChannels = async() => {
    await getAllCategories().then(res => {
        // console.log("频道列表" + JSON.stringify(res.data));
        userStore.updateChannels(res.data);
    })
}

onBeforeUnmount(async () => {
    await closeIMWebSocket();
    window.removeEventListener("beforeunload", closeIMWebSocket);
});

// 开启websocket
const initIMServer = async () => {
    await userStore.connectWebSocket();
    const connection = JSON.stringify({
        code: 100,
        content: "Bearer " + localStorage.getItem('Authorization'),
    });
    userStore.ws.send(connection);
}

// 关闭websocket
const closeIMWebSocket = async () => {
    userStore.closeWebSocket();
}

// 获取当前用户的收藏夹列表
const getFavorites = async () => {
    getFavorite(userStore.user.uid).then(res => {
        const defaultFav = res.data.find(item => item.type === 1);
        const list = res.data.filter(item => item.type !== 1);
        list.unshift(defaultFav);
        console.log("用户收藏夹" + JSON.stringify(list));
        userStore.updateFavorites(list);
    })
}

// 监听isLoading状态
watchEffect(() => {
    if (userStore.isLoading) {
        show();
    } else {
        hide();
    }
});


</script>

<style scoped>
#app {
    margin: 0 auto;
    max-width: 2560px;
    background-color: var(--bg1);
}

.loading-mark {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 50000;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.loading-box {
    display: flex;
    height: 100vh;
    width: 100vw;
    align-items: center;
    justify-content: center;
}

.loading-box img {
    max-height: 33vh;
    max-width: 33vw;
}

.hide {
    animation: fade-out 0.2s ease-out forwards;
}

.show {
    animation: fade-in 0.2s ease-out forwards;
}

/* 淡入动画 */
@keyframes fade-in {
    0% {
        opacity: 0;
        /* 初始状态透明 */
    }

    100% {
        opacity: 1;
        /* 最终状态不透明 */
    }
}

/* 淡出动画 */
@keyframes fade-out {
    0% {
        opacity: 1;
        /* 初始状态不透明 */
    }

    100% {
        opacity: 0;
        /* 最终状态透明 */
    }
}
</style>
